<template>
  <div class="multi_line" v-if="list?.length > 0">
    <p v-for="(item, index) in list?.slice(0, 2)" :key="index">
      <!-- <SvgIcon name="bronze_medal" size="16px" /> -->
      <span>{{ item }}</span>
      <ga-tooltip v-if="index === 1 && list.length > 2">
        <template #content>
          <p v-for="(el, idx) in list" :key="idx">{{ el }}</p>
        </template>
        <icon-more class="icon_more" />
      </ga-tooltip>
    </p>
  </div>
  <span v-else>-</span>
</template>

<script setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  list: {
    required: Array,
    default: () => [],
  },
});

onMounted(() => {});
</script>

<style scoped lang="scss">
.multi_line {
  // border: 1px solid #000;
  min-width: 100px;
  .icon_more {
    margin-left: 4px;
    cursor: pointer;
  }
}
</style>
